<script setup lang="ts">
import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n";
import { Locale } from "vant";
import MoreActivity from "@/components/moreActivity/index.vue";
definePageMeta({
  layout: "default-custom",
  // name: 'home',
  title: "activity",
  i18n: "menu.activity",
});
const showPicker=ref(false)
const goMore=()=>{
showPicker.value=true
}
</script>

<template>
  <div class="px-15 pt-30">
    <!-- 头部 -->
    <div class="flex items-center justify-between">
      <div class="flex items-center w-40%">
        <div class="bg-#394243 rounded-6 p-7 mr-10" @click="goMore">
          <img src="/imgs/more.png" alt="" class="w-15 h-15" />
        </div>
        <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5" />
      </div>
      <div class="flex items-center">
        <img src="/imgs/gold_icon.png" alt="" class="w-20 mr-5" />
        <div
          class="bg-#2d3233 rounded-6 flex items-center justify-between pl-3 h-30"
        >
          <img src="/imgs/gold_icon.png" alt="" class="w-20 ml-5" />
          <div class="px-5 color-#ffffff text-14">999</div>
          <div class="add bg-#454c4c px-5">
            <van-icon name="plus" :size="15" color="#ffffff" />
          </div>
        </div>
      </div>
      <div class="vip">VIP2</div>
    </div>
    <div class="mt-20">
      <div class="relative">
        <img src="/imgs/hot_logo.png" alt="" class="hot" />
        <img src="/activity/sp_jackpot.png" alt="" class="mb-10" />
      </div>
     <div class="relative">
        <img src="/imgs/hot_logo.png" alt="" class="hot" />
        <img src="/activity/sp_welcome.png" alt="" />
      </div>
    </div>

     <!-- 更多弹窗 -->
      <MoreActivity v-model:show="showPicker" title="选择游戏"  />
    <AppFooter />
  </div>
</template>

<style lang="css" scoped>
.hot{
  width: 70px;
  position: absolute;
  top: -12px;
  left: -6px;
}
.vip {
  width: 70px;
  background: url("/imgs/v2_bg.png") no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  padding: 3px 0 3px 35px;
}

.add {
  width: 55%;
  height: 100%;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>